<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>用户管理</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../lib/zTree/css/metroStyle/metroStyle.css">
	<link rel="stylesheet" href="../../static/css/skins.css">
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.min.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../lib/zTree/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
	<script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<style type="text/css">
		.mytable-style .vxe-body--column.col-red {
		          color: limegreen;
		}
		.mytable-style .vxe-body--column.col-orange {
		          color: red;
		}
		/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
		}

		.el-main {
			padding: 4px;
		}

		.el-cascader-menu__wrap {
			min-height: 300px
		}

		[v-cloak] {
			display: none;
		}
		.el-icon-search{
			color: #409EFF;
		}
		.el-icon-refresh-right{
			color: #409EFF;
		}
	</style>
</head>

<body class="skin-blue skin-del">
	<el-container id="app" v-cloak>
		<el-aside width="15%" style="background-color: white;">
			<div>
				<ul id="ztree" class="ztree"></ul>
			</div>
		</el-aside>
		<el-main>
			<el-form :inline="true" :model="queryData" ref="queryData" label-width="50px" label-position="right" size="mini"
				@submit.native.prevent style="height: 36px;">
				<el-form-item label="工号">
					<el-input v-model="queryData.userId" placeholder="请输入工号"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="queryData.userName" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item>
				    <el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
				    <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
				</el-form-item>
			</el-form>

			<vxe-grid border class="mytable-style" :cell-class-name="cellClassName" ref="xGrid"  resizable show-overflow highlight-current-row="true" keep-source
				@page-change="handlePageChange" :height="tableHeight" size="mini" :data="gridData" :loading="tableLoading"
				:header-cell-style="{'text-align':'center','font-size': tableFontSize}" :row-style="{'font-size': tableFontSize}" :checkbox-config="tableRadio" :pager-config="tablePage"
				:toolbar="tableToolbar" :export-config="tableExport" @cell-dblclick="cellDBLClickEvent"
				:edit-config="{trigger:'click', mode:'row'}" @toolbar-button-click="toolbarButtonClickEvent" 
				:sort-config="{remot:true}" @sort-change="tableSortChange">
				<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
				<vxe-table-column type="seq" title="序号" width="60" align="right" >
				</vxe-table-column>
				<vxe-table-column field="userId" title="工号" width="100" align="left" sortable='custom'>
				</vxe-table-column>
				<vxe-table-column field="userName" title="姓名" width="120" align="left">
				</vxe-table-column>
				<vxe-table-column field="realAccNbr" title="手机号" align="right" width="100">
				</vxe-table-column>
				<vxe-table-column field="email" title="邮箱" align="left" width="150">
				</vxe-table-column>
				<vxe-table-column field="departName" title="部门" width="100" align="left">
				</vxe-table-column>
				<vxe-table-column field="departId" title="部门ID" width="80" align="right" :visible="visible">
				</vxe-table-column>
				<vxe-table-column field="roleName" title="角色" width="120" align="left">
				</vxe-table-column>
				<vxe-table-column field="roleId" title="角色ID" width="80" align="left" :visible="visible">
				</vxe-table-column>
				<vxe-table-column field="createUser" title="创建人" width="130" align="left">
				</vxe-table-column>
				<vxe-table-column field="createTime" title="创建日期" width="150" align="right" :formatter="formatDate">
				</vxe-table-column>
				<vxe-table-column field="stateName" title="用户状态" width="120" align="center">
				</vxe-table-column>
				<vxe-table-column field="id" title="自增ID" width="180" align="center" :visible="visible">
				</vxe-table-column>
				<vxe-table-column title="操作" width="250" align="center" show-overflow>
					<template v-slot="{ row }">
						<vxe-button type="text" icon="fa fa-edit vxe-primary-color" @click="addRoleEvent(row)" title="权限配置">权限配置
						</vxe-button>
					</template>
				</vxe-table-column>
			</vxe-grid>

			<vxe-modal ref="xModal" v-model="modifyPass" :title="'修改用户密码'" width="600" height="300" :loading="submitLoading" resize
			destroy-on-close>
			<el-form :model="formData" :rules="modifyformRules" ref="modifyPassData" label-width="100px" label-position="right"
			size="mini">
			<el-row>
				<el-col span="20">
					<el-form-item label="新密码" prop="userId">
						<el-input type="password" v-model="modifyPassData.newPassword" placeholder="请输入新密码" maxlength="32"
							:disabled="selectRow==null"></el-input>
					</el-form-item>
				</el-col>
				</el-row>
				<el-row>
					<el-col span="20">
						<el-form-item label="再次输入" prop="userId">
							<el-input type="password" v-model="modifyPassData.againPassword" placeholder="请再次输入密码" maxlength="32"
								:disabled="selectRow==null"></el-input>
						</el-form-item>
					</el-col>
					</el-row>
					<el-row>
						<el-col span="24">
							<el-form-item>
								<el-button type="primary" icon="el-icon-folder" @click="submitPasswordNew()"
									 v-cloak>确定
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
			</el-form>
			</vxe-modal>

			<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="750"
				:loading="submitLoading" resize destroy-on-close>
				<el-form :model="formData" :rules="formRules" ref="formData" label-width="100px" label-position="right"
					size="mini">
					<template v-if="visible===true">
						<el-row>
							<el-col span="11">
								<el-form-item label="用户ID" prop="id">
									<el-input v-model="formData.id"></el-input>
								</el-form-item>
							</el-col>
							<el-col span="11">
								<el-form-item label="机构编码" prop="departId">
									<el-input v-model="formData.departId"></el-input>
								</el-form-item>
							</el-col>
					</template>
					<el-row>
						<el-col span="11">
							<el-form-item label="工号" prop="userId">
								<el-input type="text" v-model="formData.userId" placeholder="请输入工号，保存后将无法修改工号！" maxlength="32"
									:disabled="selectRow!=null"></el-input>
							</el-form-item>
						</el-col>
						<el-col span="11">
							<el-form-item label="姓名" prop="userName">
								<el-input type="" style="display:none;"></el-input>
								<el-input type="text" v-model="formData.userName" placeholder="请输入姓名" maxlength="32"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<!-- <el-col span="11" v-if="selectRow==null">
							<el-form-item label="初始密码" prop="password">
								<el-input type="password" style="display:none;"></el-input>
								<el-input name="pass" type="text" v-model="formData.password" placeholder="请填写初始密码！" maxlength="64"
									show-password autoComplete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col span="11" v-if="selectRow!=null">
							<el-form-item label="密码" prop="password">
								<el-input type="password" style="display:none;"></el-input>
								<el-input name="pass" type="text" v-model="formData.password" placeholder="请填写密码！" maxlength="64"
									show-password autoComplete="off"></el-input>
							</el-form-item>
						</el-col> -->
						<el-col span="11">
							<el-form-item label="手机号" prop="realAccNbr">
								<el-input type="text" v-model="formData.realAccNbr" placeholder="请填写手机号！" maxlength="32">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col span="11">
							<el-form-item label="所属角色" prop="roleId">
								<el-cascader v-model="formData.roleId" :options="roleOptions"
									:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }" clearable
									filterable style="width:100%">
								</el-cascader>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="11">
							<el-form-item label="email邮箱" prop="email">
								<el-input type="text" v-model="formData.email" placeholder="请填写email邮箱！"></el-input>
							</el-form-item>
						</el-col>

					</el-row>
					<el-row>
						<el-col span="22">
							<el-form-item style="text-align: right;">
								<el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')" :disabled="disabled"
									v-cloak>保存
								</el-button>
								<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>重置
								</el-button>
								<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')" v-cloak>退出
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</vxe-modal>

			<vxe-modal ref="xModal" v-model="addRole" :title="'权限配置'" width="900" height="580" :loading="submitLoading" resize
				destroy-on-close>
				<el-form :model="roleformData" :rules="roleformRules" ref="roleformData" label-width="100px"
					label-position="right" size="mini">
					<el-row>
						<el-col span="12">
							<el-form-item label="工号" prop="userId">
								<el-input type="text" v-model="roleformData.userId" placeholder="请输入工号，保存后将无法修改工号！" maxlength="32"
									:disabled="selectRow!=null"></el-input>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="姓名" prop="userName">
								<el-input type="" style="display:none;"></el-input>
								<el-input type="text" v-model="roleformData.userName" placeholder="请输入姓名" maxlength="32"
									:disabled="selectRow!=null"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="部门" prop="departId">
								<el-cascader v-model="roleformData.departId" :options="orgOptions"
									:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }" clearable
									filterable style="width:100%">
								</el-cascader>
							</el-form-item>
						</el-col>

						<el-col span="12">
							<el-form-item label="角色" prop="roleId">
								<el-cascader v-model="roleformData.roleId" :options="roleOptions"
									:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }" clearable
									filterable style="width:100%">
								</el-cascader>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="24">
							<el-form-item>
								<el-button type="primary" icon="el-icon-folder" @click="submitEventNew('roleformData')"
									:disabled="disabled" v-cloak>增加
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-main>
					<vxe-grid border stripe ref="xGrid1"  resizable show-overflow highlight-current-row="true" keep-source
						@page-change="handlePageChange" :height="330" size="mini" :data="roleGridData" :loading="tableLoading"
						:header-cell-style="{'text-align':'center'}" :radio-config="tableRadio" :pager-config="roletablePage"
						@cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}">
						<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
						<vxe-table-column type="seq" title="序号" width="60" align="right">
						</vxe-table-column>
						<vxe-table-column field="id" title="编号" align="right">
						</vxe-table-column>
						<vxe-table-column field="departName" title="部门" align="left">
						</vxe-table-column>
						<vxe-table-column field="roleName" title="角色" align="left">
						</vxe-table-column>
						<vxe-table-column field="roleType" title="状态" width="100" align="left">
						</vxe-table-column>
						<vxe-table-column title="操作" width="180" align="center" show-overflow>
							<template v-slot="{ row }">
								<vxe-button type="text" icon="fa fa-edit vxe-primary-color" @click="statusRoleEvent(row)" title="设置默认">
								</vxe-button>
								<vxe-button type="text" icon="fa fa-trash-o vxe-primary-color" @click="removeRoleEvent(row)" title="删除">
								</vxe-button>
							</template>
						</vxe-table-column>
					</vxe-grid>
				</el-main>
			</vxe-modal>
		</el-main>
	</el-container>
</body>
<script type="text/javascript">
	window.onload = function () {
		let main = {
			data() {
				return {
					value16: false,
					userId:'',
					tableFontSize:'12px',
					FontSize:'12px',
					//排序
					prop: '',
					order: '',
					selected: [],
					loading: false,
					disabled: false,
					modifyPass:false,
					modifyPassData:{},
					visible: false,
					roleOptions: [],
					tableHeight: '100%',
					tablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 30,
						align: 'left',
						pageSizes: [30, 50, 100, 200],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					roletablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 30,
						align: 'left',
						pageSizes: [30, 50, 100, 200],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					tableLoading: false,
					gridData: [],
					roleGridData: [],
					orgOptions: [],
					tableToolbar: {
						id: 'toolbar',
						size: 'mini',
						perfect: true,
						buttons: []
					},
					tableExport: {
						filename: 'export',
						sheetName: 'Sheet1',
						type: 'xlsx',
						// 自定义类型
						types: ['xlsx', 'csv', 'html', 'xml', 'txt']
					},
					tableRadio: {
						trigger: 'row',
						highlight: true
					},
					submitLoading: false,
					selectRow: null,
					showEdit: false,
					addRole: false,
					queryData: {
						userId: "",
						userName: "",
						departId: ""
					},
					roleformData: {
						userId: "",
						userName: "",
					},
					roleformRules: {
						roleId: [{
							required: true,
							message: '请选择角色'
						}],
						departId: [{
							required: true,
							message: '请选择部门'
						}]
					},
					modifyformRules:{
						newPassword: [{
							required: true
						}],
						againPassword: [{
							required: true
						}]
					},
					formData: {
						id: "",
						userId: "",
						userName: "",
						password: "",
						realAccNbr: "",
						roleId: "",
						departId: "",
						email: ""
					},
					formRules: {
						userId: [{
								required: true,
								message: '请输入工号'
							},
							{
								min: 1,
								max: 32,
								message: '长度在1到32个字符'
							}
						],
						userName: [{
								required: true,
								message: '请输入姓名'
							},
							{
								min: 1,
								max: 200,
								message: '长度在1到200个字符'
							}
						],
						password: [{
								required: true,
								message: '请输入密码'
							},
							{
								min: 6,
								max: 64,
								message: '长度在6到64个字符'
							}
						],
						realAccNbr: [
							{
								pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
								message: '手机号格式不对',
								trigger: ['blur', 'change']
							},
							{
								min: 1,
								max: 32,
								message: '长度在1到32个字符'
							}
						],
						roleId: [{
							required: true,
							message: '请选择所属角色'
						}],
						email: []
					},
					setting: {
						async: {
							enable: true,
							url: `${curl}/org/getOrgZtree`,
							type: 'post',
							autoParam: ["orgCode"],
							otherParam: {
								userCode: 'admin'
							}
						},
						check: {
							enable: true,
							chkStyle: 'radio',
							radioType: "all"
						},
						data: {
							key: {
								name: "departName"
							},
							simpleData: {
								enable: true,
								idKey: "departId",
								pIdKey: "parentDepartId",
								rootPId: '0'
							}
						},
						view: {
							showLine: true,
							dblClickExpand: false,
							showIcon: true
							//fontCss: $.fn.getFontCss
						},
						callback: {
							onAsyncSuccess: this.zTreeOnAsyncSuccess,
							onClick: this.zTreeOnClick
						}
					}
				}
			},
			created() {
				this.getRoleOptions();
				this.findList();
				this.getBtn();
				this.tableFontSize="12px";
			},
			mounted() {
				var that=this;
				this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
				//window.innerHeight:浏览器的可用高度
				//this.$refs.table.$el.offsetTop：表格距离浏览器的高度
				//后面的50：根据需求空出的高度，自行调整
				$.fn.zTree.init($("#ztree"), this.setting);
				//通过监听Storage里的值，将其赋给FontSize
				window.addEventListener('storage',(e)=>{
					console.log(e)
					that.tableFontSize=e.storageArea.tableFontSize;
				})
			},
			methods: {
				searchEvent() {
						this.findList();
				},
				searchEventA() {
						this.queryData.userId = "";
						this.queryData.userName = "";
						this.findList();
				},
				cellClassName ({ row, rowIndex, column, columnIndex }) {
				   if (column.property === 'stateName') {
				         if (row.state=='1') {
				           return 'col-red'
				        } else if (row.state=='5') {
				            return 'col-orange'
				       }
				   }
				},
				getTreeData(data) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].children.length < 1) {
							// children若为空数组，则将children设为undefined
							data[i].children = undefined;
						} else {
							// children若不为空数组，则继续 递归调用 本方法
							this.getTreeData(data[i].children);
						}
					}
					return data;
				},
				getBtn() {
					this.tableToolbar.buttons = []
					let bts = Tool.getButton()
					let btns = [
					// {
					// 	code: 'reset',
					// 	name: '用户解锁',
					// 	status: 'perfect',
					// 	icon: 'fa fa-toggle-on vxe-primary-color'
					// }, 
					// {
					// 	code: 'on',
					// 	name: '停用 / 启用',
					// 	status: 'perfect',
					// 	icon: 'fa fa-toggle-on vxe-primary-color'
					// },
					]
					this.tableToolbar.buttons = btns.concat(bts)
				},
				handlePageChange({
					currentPage,
					pageSize
				}) {
					this.tablePage.currentPage = currentPage
					this.tablePage.pageSize = pageSize
					this.findList()
				},
				//获取列表信息
				findList() {
					this.tableLoading = true;
					let params = Object.assign({
						page: this.tablePage.currentPage,
						rows: this.tablePage.pageSize,
						userId: this.queryData.userId,
						userName: this.queryData.userName,
						departId: this.queryData.departId,
						//order为排序的方式，prop为排序的列
						order:this.order,
						prop:this.prop
					})
					let that = this;
					webApi('/users/getUserList', 'post', params, function (data) {
						that.gridData = data.data.rows;
						that.tablePage.total = data.data.total;
						that.tableLoading = false;
					}, function () {
						that.tableLoading = false;
					})
				},
				roleDepartList() {
					this.roletableLoading = true;
					let params = Object.assign({
						page: this.tablePage.currentPage,
						rows: this.tablePage.pageSize,
						userId: this.roleformData.userId
					})
					let that = this;
					webApi('/users/userRoleTableList', 'post', params, function (data) {
						that.roleGridData = data.data.rows;
						that.roletablePage.total = data.data.total;
						that.roletableLoading = false;
					}, function () {
						that.tableLoading = false;
					})
				},
				zTreeOnAsyncSuccess() {
					let treeObj = $.fn.zTree.getZTreeObj("ztree");
					let nodes = treeObj.getNodes();
					if (nodes.length > 0) {
						for (let i = 0; i < nodes.length; i++) {
							treeObj.expandNode(nodes[i], true, false, false); //默认展开第一级节点
						}
					}
					// treeObj.expandAll(true);
				},
				zTreeOnClick(event, treeId, treeNode) {
					let treeObj = $.fn.zTree.getZTreeObj("ztree");
					treeObj.checkNode(treeNode, true, true, true);
					this.queryData.departId = treeNode.departId;
					this.formData.departId = treeNode.departId;
					this.selected = treeObj.getCheckedNodes(true);
					this.searchUser();
				},
				searchUser() {
					this.tablePage.currentPage = 1
					this.findList()
				},
				getRoleOptions() {
					let that = this;
					webApi('/role/getRoleOptions', 'post', {}, function (data) {
						that.roleOptions = that.getTreeData(data.data);
					}, function (xhr, type, errorThrown) {})
				},
				getOrgOptions() {
					let that = this;
					webApi('/org/getOrgOptions', 'post', {}, function (data) {
						if (data.code == 200) {
							that.orgOptions = that.getTreeData(data.data);
						} else {
							that.$message({
								message: data.msg,
								type: 'error',
								center: true
							});
						}
					}, function () {})
				},
				searchEvent(formName, acType) {
					let treeObj = $.fn.zTree.getZTreeObj("ztree");
					let nodes = treeObj.getCheckedNodes(true);
					if (acType == 0) {
						this.tablePage.currentPage = 1
						this.queryData = {
							userCode: "",
							userName: "",
							departId: nodes.length >= 1 ? nodes[0].departId : ''
						}
					} else {
						this.queryData.departId = nodes.length >= 1 ? nodes[0].departId : '';
					}
					this.findList()
				},
				formatDate({
					cellValue
				}) {
					return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
				},
				toolbarButtonClickEvent({
					code
				}, event) {
					switch (code) {
						case 'reset':
							this.userEventA();
							break;
							this.userEventA();
							break;
						case 'on':
							this.userEvent();
							break;
							this.userEvent();
							break;
						case 'btnInsert':
							this.insertEvent();
							break;
						case 'btnUpdate':
							if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
								let row = this.$refs.xGrid.getCheckboxRecords()
								this.editEvent(row[0]);
							} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
								this.$message({
									message: "数据大于一条，无法修改",
									type: 'warning',
									center: true
								});
							} else {
								this.$message({
									message: "请选择一行数据",
									type: 'warning',
									center: true
								});
							}
							break;
							case 'btnModifyPwd':
							if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
								let row = this.$refs.xGrid.getCheckboxRecords()
								this.modifyPassEvent(row[0]);
							} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
								this.$message({
									message: "数据大于一条，无法修改",
									type: 'warning',
									center: true
								});
							} else {
								this.$message({
									message: "请选择一行数据",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnDelete':
							let row = this.$refs.xGrid.getCheckboxRecords();
							if (row.length > 0) {
								this.removeEvent(row);
							} else {
								this.$message({
									message: "请选择需要删除的数据行",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnExport':
							this.$refs.xGrid.exportData({
								filename: '菜单列表',
								sheetName: 'Sheet1',
								type: 'xlsx'
							});
							break;
					}
				},
				insertEvent() {
					let nodes = this.selected;
					if (nodes.length >= 1) {
						this.formData = {
							id: "",
							userId: "",
							userName: "",
							password: '000000',
							realAccNbr: "",
							roleId: "",
							email: "",
							departId: nodes[0].departId
						};
						this.selectRow = null;
						this.showEdit = true;
					} else {
						this.$message({
							message: '请选择机构',
							type: 'warning',
							center: true
						});
					}
				},
				//用户账号锁定
				userEventA(){
					if (this.$refs.xGrid.getCheckboxRecords().length >= 1) {
						let row = this.$refs.xGrid.getCheckboxRecords()
						this.submitLoading = true;
						let ids = ""
						row.forEach(item => {
							ids += item.id + ","
						});
						let params = {
							 id : ids
						};
						let that=this;
						webApi('/users/UserJieSuo', 'post', params, function (data){
							that.$message({
								message: data.msg,
								type: 'success',
								center: true
							});
							that.findList();
						});
					}
				},
				//用户停用启用
				userEvent(userId){
					if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
						let row = this.$refs.xGrid.getCheckboxRecords()
						let params={
							userId:row[0].userId
						}
						let that=this;
						webApi('/users/userStop', 'post', params, function (data){
							//console.log(row[0].state)
							that.$message({
								message: data.msg,
								type: 'success',
								center: true
							});
							that.findList();
						}, function () {
							that.$message({
								message: data.msg,
								type: 'error',
								center: true
							});
						});
					} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
						this.$message({
							message: "只能操作单个用户",
							type: 'warning',
							center: true
						});
					} else {
						this.$message({
							message: "请选择一行数据",
							type: 'warning',
							center: true
						});
					}
				},
				submitEvent(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;
							// let password = this.formData.password;
							// if (password.length < 32) {
							// 	this.formData.password = Base64.encode(hex_md5(password).toUpperCase());
							// }
							this.formData.roleId = this.formData.roleId.toString();
							let params = Object.assign(this.formData);
							let that = this
							webApi('/users/save', 'post', params, function (data) {
								if (data.code == 200) {
									// that.$refs.xGrid.commitProxy('reload');
									that.findList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
							that.disabled = true;
						} else {
							return false;
						}
					});
				},
				submitEventNew(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;
							let params = Object.assign(this.roleformData);
							let that = this
							webApi('/users/saveDepartRole', 'post', params, function (data) {
								if (data.code == 200) {
									// that.$refs.xGrid.commitProxy('reload');
									that.roleDepartList();
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
							that.disabled = true;
						} else {
							return false;
						}
					});
				},
				resetEvent(formName) {
					let treeObj = $.fn.zTree.getZTreeObj("ztree");
					let nodes = treeObj.getCheckedNodes(true);
					if (nodes.length >= 1) {
						this.formData = {
							id: "",
							userId: "",
							userName: "",
							password: '000000',
							realAccNbr: "",
							roleId: "",
							email: "",
							departId: nodes[0].departId
						};
						this.selectRow = null;
					} else {
						this.$message({
							message: '请选择机构',
							type: 'warning',
							center: true
						});
					}
				},
				closeEvent(formName) {
					this.showEdit = false;
				},
				editEvent(row) {
					this.formData = {
						id: row.id,
						userId: row.userId,
						userName: row.userName,
						realAccNbr: row.realAccNbr,
						roleId: row.roleId.length > 0 ? row.roleId : "",
						email: row.email,
						departId: row.departId
					};
					this.selectRow = row;
					this.showEdit = true;
				},
				modifyPassEvent(row) {
					this.selectRow = row;
					this.modifyPass = true;
				},
				removeEvent(row) {
					this.$XModal.confirm('您确定要删除该数据?(删除后该用户无法再次访问该系统)').then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;
							let ids = ""
							row.forEach(item => {
								ids += item.id + ","
							});
							let params = Object.assign({
								id: ids
							});
							let that = this;
							webApi('/users/delete', 'post', params, function (data) {
								if (data.code == 200) {
									// that.$refs.xGrid.commitProxy('reload');
									that.findList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
						}
					});
				},
				submitPasswordNew() {
					let rowData=this.selectRow;
					let psData=this.modifyPassData;
					if(psData.newPassword!=psData.againPassword){
						this.$message({
										message: "两次输入密码不一致！",
										type: 'error',
										center: true
									});
						return false;
					}

					this.$XModal.confirm('您确定要修改密码吗？').then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;

							let params = Object.assign({
								userId: rowData.userId,
								newPassword: Base64.encode(hex_md5(psData.newPassword).toUpperCase())
							});
							let that = this;
							webApi('/users/updatePassword', 'post', params, function (data) {
								if (data.code == 200) {
									// that.$refs.xGrid.commitProxy('reload');
									// that.findList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.modifyPass = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
						}
					});
				},
				addRoleEvent(row) {
					this.roleformData = {
						userId: row.userId,
						userName: row.userName
					};
					this.selectRow = row;
					this.addRole = true;
					this.getOrgOptions();
					this.roleDepartList();
				},
				statusRoleEvent(row) {
					this.$XModal.confirm("您确定要设置该角色数据为默认吗?").then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;
							let params = Object.assign({
								id: row.id,
								userId: this.roleformData.userId
							});
							let that = this
							webApi('/users/changeRoleType', 'post', params, function (data) {
								if (data.code == 200) {
									// that.$refs.xGrid.commitProxy('reload');
									that.roleDepartList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
						}
					});
				},
				removeRoleEvent(row) {
					this.$XModal.confirm('您确定要删除该数据?').then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;
							let params = {
								id: row.id
							};
							let that = this;
							webApi('/users/UserRoleDelete', 'post', params, function (data) {
								if (data.code == 200) {
									// that.$refs.xGrid.commitProxy('reload');
									that.roleDepartList()
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
							}, function (xhr, type, errorThrown) {})
							this.submitLoading = false;
						}
					});
				},
				cellDBLClickEvent({
					row
				}) {
					this.editEvent(row);
				},
				checkColumnMethod({
					column
				}) {
					if (['userCode', 'userName'].includes(column.property)) {
						return false
					}
					return true
				},
				//表头列排序
				tableSortChange(column, prop, order) {
					//点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
					//console.log(column + '---' + column.prop + '---' + column.order)
					this.order=column.order;
					this.prop=column.prop;
					this.findList();
				},
			
			}
		};

		let vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>